<template>
    <div class="loading-wrapper" v-if="value">
        <div class="mark"></div>
        <main class="loading-content">
            <slot name="icon-loading">
                <span class="loading-icon"></span>
            </slot>
        </main>
    </div>
</template>
<script>
    export default {
        name: 'Loading',
        props: ['value']
    }
</script>
<style lang="scss"> 
    .loading-wrapper{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        // color: #fff;
        .mark{
            width:100%;
            height: 100%;
            background:rgba(0,0,0,.5);
        }
        .loading-content{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px;
            border-radius:10px;
            .loading-icon{
                display: block;
                width: 50px;
                height:50px;
                border-radius: 50%;
                border:4px solid transparent;
                border-top-color:rgb(204, 204, 204);
                border-left-color:rgb(204, 204, 204);
                border-bottom-color:rgb(204, 204, 204);
                animation: my-rotate .8s infinite linear;
            }
        }
    }
    @-ms-keyframes my-rotate {
        0% {transform: rotate(0)}
        30% {transform: rotate(90deg)}
        60% {transform: rotate(180deg)}
        100% {transform: rotate(360deg)}
    }
    @-o-keyframes my-rotate {
        0% {transform: rotate(0)}
        30% {transform: rotate(90deg)}
        60% {transform: rotate(180deg)}
        100% {transform: rotate(360deg)}
    }
   @-webkit-keyframes my-rotate {
        0% {transform: rotate(0)}
        30% {transform: rotate(90deg)}
        60% {transform: rotate(180deg)}
        100% {transform: rotate(360deg)}
    }
    @keyframes my-rotate {
        0% {transform: rotate(0)}
        30% {transform: rotate(90deg)}
        60% {transform: rotate(180deg)}
        100% {transform: rotate(360deg)}
    }
</style>